<template>
    <div class="son1">
        <div class="swiper-container-son1">
            <div class="swiper-wrapper">
                <div class="swiper-slide swiper-slide-son1" v-for="(value,item) of imgList" :key="item" @click="toDetail(value.id,value.productfieldsorting)" style="cursor: pointer">
                    <img :src="`http://www.shangyuninfo.com/api/profile/product/${value.backgroundRotaryBroadcasting}`"
                         alt="">
                </div>
            </div>
            <!-- Add Arrows -->
            <div class="swiper-button-prev" @click="test"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-pagination-son1"></div>
        </div>
    </div>
</template>

<script>
    import {getProductList} from "../../api";
    //轮播图相关
    import 'swiper/dist/js/swiper'
    import 'swiper/dist/css/swiper.css'
    import Swiper from "swiper"

    export default {
        name: "page1",
        data() {
            return {
                imgList: [],
                swiper: {},
            }
        },
        created() {
            // console.log("aiusfghoai")
            getProductList().then(res => {
                console.log(res)
                this.imgList = res.data.rows
            })
        },
        watch: {
            imgList() {
                setTimeout(() => {
                    // eslint-disable-next-line no-unused-vars
                    this.swiper = new Swiper(".swiper-container-son1", {
                        paginationClickable: true,//可以点
                        pagination: {
                            //小圆点
                            el: ".swiper-pagination-son1",
                            clickable: true,
                        },
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        },
                        observer: true,//修改swiper自己或子元素时，自动初始化swiper
                        loop: true,
                        speed: 1000,
                        autoplay: {
                            delay: 4000,
                            stopOnLastSlide: false,
                            disableOnInteraction: true,
                        }
                    })
                }, 0)
            }
        },
        methods: {
            test() {
                console.log('dasihgfuds')
            },
            toDetail(to,select) {
                if(select==3) {
                    this.$router.push({
                        path:'/detailsForNews',
                        query:{
                            id:to,
                            select:'产品详情',
                        }
                    })
                }
                if(select==2) {
                    this.$router.push({
                        path:'/detailsForNews',
                        query:{
                            id:to,
                            select:'产品详情',
                        }
                    })
                }
            }
        },
        components:{
        }
    }
</script>

<style scoped lang="less">
    .text {
        position: fixed;
        width: 120px;
        height:120px;
        background-color: #888889;
        z-index: 21;
    }
    .swiper-container {
        width: 100%;
        height: 100%;
    }

    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    //全局设定
    .son1 {
        min-width: 1200px !important;
        height: 100%;
    }

    //设置图片大小占满
    .swiper-slide-son1 {
        width: 100%;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .swiper-container-son1 {
        height: 100% !important;
    }

    .swiper-wrapper {
        height: 100%;
    }

    //两个前进后退的css
    .swiper-button-prev {
        left: 50px;
        padding: 20px;
    }

    .swiper-button-next {
        right: 50px;
        padding: 20px;
    }
    .swiper-pagination-son1 {
        position: absolute;
        z-index: 2;
        left: 45%;
        top: 92%;
    }
    //点点
    /deep/.swiper-pagination-bullet {
        width: 15px;
        height: 15px;
        margin: 0px 10px!important;
        background-color: white!important;
    }
</style>
